<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="container extra">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

<style>
    .container {
        /* first breakpoint*/
        --w1: 1200px;
        --n: 6;
        /* second breakpoint*/
        --w2: 800px;
        --m: 4;
        /* third breakpoint*/
        --w3: 400px;
        --p: 2;

        display: grid;
        grid-template-columns:
            repeat(auto-fill,
                minmax(clamp(clamp(clamp(100%/(var(--n) + 1) + 0.1%,
                                (var(--w1) - 100%)*1000,
                                100%/(var(--m) + 1) + 0.1%),
                            (var(--w2) - 100%)*1000,
                            100%/(var(--p) + 1) + 0.1%),
                        (var(--w3) - 100%)*1000,
                        100%), 1fr));
        gap: 10px;
        border: 1px solid;
        overflow: hidden;
        margin: 5px;
        resize: horizontal;
    }

    .container>div {
        height: 100px;
        background: red;
    }

    .extra {
        /* first breakpoint*/
        --w1: 900px;
        --n: 8;
        /* second breakpoint*/
        --w2: 500px;
        --m: 4;
        /* third  breakpoint*/
        --w3: 300px;
        --p: 2;
        padding: 50px;
    }

    .extra>div {
        background: green;
    }
</style>

</html>